<template>
	<view>
		<image src="../../static/1-1-04.jpg" class="bgImg"></image>
		<form @submit="Binding" @reset="" class="binding-form">
			<view class="binding">
				<view class="auth">
					<image class="auth-img" src="../../static/me.png" mode=""></image>
				</view>
				<view class="career-text">
					<text>Bind Student ID</text>
				</view>
				<view class="line"></view>
				<input class="uni-input in-name" placeholder="学号" type="number" name="username" />
				<input class="uni-input in-pwd" placeholder="密码" type="password" name="password" />
				<button class="binding-btn" form-type="submit">绑定</button>
				<navigator class="goaround" open-type="redirect" url="../register/register">还没账号？去注册-></navigator>
			</view>
		</form>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {

			}
		},
		computed: {
			...mapState(['userinfo'])
		},
		methods: {
			Binding(e) {
				var _self = this
				console.log(_self.userinfo.jscode)
				var forData = e.detail.value
				if (forData.username === '' || forData.password === '') {
					this.$showMessage('请输入账号和密码')
				} else {
					uni.showLoading({
						title: '验证中'
					})
					this.$request({
						method: 'POST',
						url: 'occupation/bindingUser/',
						header: {
							'content-type': 'application/x-www-form-urlencoded'
						},
						data: {
							'username': forData.username,
							'password': forData.password,
							'jscode': _self.userinfo.jscode
						},
					}).then(res => {
						if (res.code === 200) {
							uni.hideLoading()
							uni.showToast({
								title: res.message
							})
							_self.userinfo.token = res.data.token
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/home/home'
								})
							}, 1500)
						} else {
							this.$showMessage(res.message)
						}
					})
				}
			}
		}
	}
</script>


<style>
	.goaround {
		color: #FFFFFF;
		text-align: center;
	}

	.bgImg {
		position: absolute;
		z-index: 0;
		width: 100%;
		height: 100%;
		color: #FFFFFF;
	}

	.auth {
		width: 80px;
		height: 80px;
		margin: auto;
		background-color: #FFFFFF;
		border-radius: 50%;
	}

	.auth-img {
		width: 40px;
		height: 40px;
		margin-top: 20px;
	}

	.career-text {
		margin-top: 30PX;
		color: #FFFFFF;
	}

	.line {
		height: 2px;
		width: 80px;
		margin: auto;
		margin-top: 5px;
		border-bottom: 2px solid #FFFFFF;
	}

	.binding-form {
		height: 450px;
		margin: auto;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}

	.binding {
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
	}

	.uni-input {
		width: 185px;
		height: 40px;
		border: 2px solid #FFFFFF;
		border-radius: 20px;
		margin: auto;
		color: #FFFFFF;
		margin-top: 20px;
	}

	.binding-btn {
		margin: 30px auto;
		height: 50px;
		width: 50px;
		border-radius: 50%;
		border: #FFFFFF 2px solid;
	}
</style>
